<template>
  <!-- 提交订单 -->
  <view class="submit-order">
    <view class="main">
      <!-- 收货地址 -->
      <view class="address-box">
        <view class="flex flex-ai-c flex-jc-sb">
          <!-- 内容 -->
          <view class="content">
            <view class="title color-666 font-bold">{{ storeName }}</view>
            <view v-if="addressList.length !== 0" @click="addressShow = !addressShow">
              <view class="row">
                <text class="color-999">联系人：</text>
                <text class="color-666">{{ addressData.name }}</text>
              </view>
              <view class="row">
                <text class="color-999">联系电话：</text>
                <text class="color-666">{{ addressData.mobile }}</text>
              </view>
              <view class="row">
                <text class="color-999">收货地址：</text>
                <text class="color-666">{{ addressData.addressAll }}</text>
              </view>
            </view>
            
            <view v-else class="not-address" @click="addressShow = !addressShow">
              <text>暂无收货地址</text>
            </view>
          </view>
          
          <!-- 右箭头 -->
          <view class="icon-right">
            <u-icon name="arrow-right" size="26rpx" color="#999"></u-icon>
          </view>
        </view>
        
        <!-- 彩色的线 -->
        <view class="line"></view>
      </view>
      
      <!-- 车品信息 -->
      <view class="car-goods-info" v-for="(item, index) in detailData.storelist" :key="index">
        <!-- 店铺名 -->
        <view class="store-name" @click="goStorePage(item.store_id)">
          <text class="mr-20 font-32 color-666">{{ item.store_name }}</text>
          <u-icon name="arrow-right" size="24rpx" color="#666"></u-icon>
        </view>
        
        <!-- 车品 -->
        <view class="goods-content">
          <view class="goods-item flex" v-for="(goods, gIndex) in item.goodlist" :key="gIndex" @click="goGoodsPage(goods)">
            <view class="img">
              <image :src="goods.car_supplies_pic_path" mode="widthFix"></image>
            </view>
            
            <view class="right-content flex flex-dir-c flex-jc-sb">
              <view class="m-line-text-2 font-30 color-666">{{ goods.car_supplies_name }}</view>
              <view class="flex flex-jc-sb">
                <text class="font-30 color-666">x{{ goods.count }}</text>
                <text class="font-36 font-bold color-333">￥{{ goods.price }}</text>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 运费、发票 -->
        <view class="other-box">
          <view class="row flex flex-jc-sb flex-ai-c">
            <text class="label">运费</text>
            <text class="color-333 font-30 font-bold">{{ item.freight }}</text>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <text class="label">发票</text>
            <!-- 点击打开选择发票弹窗 -->
            <view class="color-333 font-30" @click="invoicePopupShow = !invoicePopupShow">
              <text class="mr-20">{{ isinvoice ? '开具发票' : '不开发票' }}</text>
              <u-icon name="arrow-right" size="24rpx" color="#666"></u-icon>
            </view>
          </view>
          <view class="row flex flex-jc-sb flex-ai-c">
            <text class="label">留言</text>
            <input v-model="item.remark" type="text" placeholder="请输入" placeholder-style="color: #999;" class="leave-msg">
          </view>
        </view>
      </view>
      
      <!-- 运费、发票 -->
      <view class="order-other other-box">
        <view class="row flex flex-jc-sb flex-ai-c">
          <text class="label">支付方式</text>
          <text class="value">在线支付</text>
        </view>
        <view class="row flex flex-jc-sb flex-ai-c">
          <text class="label">商品金额</text>
          <text class="value">￥{{ detailData.total_money }}</text>
        </view>
        <view class="row flex flex-jc-sb flex-ai-c">
          <text class="label">运费金额</text>
          <text class="value">{{ detailData.freight }}</text>
        </view>
      </view>
    </view>
    
    <!-- 固定在底部按钮 -->
    <view class="btn-footer flex flex-ai-c">
      <i-button bg-color="#333" shape="circleLeft" class="btn">
        <view class="b-c-content flex flex-ai-c flex-jc-c">
          <text class="font-30">实付：</text>
          <text class="font-36">￥{{ detailData.total_money }}</text>
        </view>
      </i-button>
      <i-button text="提交订单" color="#333" shape="circleRight" class="btn" @click.native="submitOrder()"></i-button>
    </view>
    
    <!-- 底部弹出框 -->
    
    <!-- 选择发票 -->
    <u-popup v-model="invoicePopupShow" mode="bottom" borderRadius="30">
      <view class="invoice-box">
        <view class="title">发票</view>
        
        <view class="content">
          <view :class="['row', !isinvoice?'c-active':'']" @click="selectedInvoice(false)">不开发票</view>
          <view :class="['row', isinvoice?'c-active':'']" @click="selectedInvoice(true)">开具发票</view>
        </view>
      </view>
    </u-popup>
    
    <!-- 收货地址列表 -->
    <u-popup v-model="addressShow" mode="bottom" borderRadius="30">
      <view class="popup-address">
        <view class="title">选择收货地址</view>
        
        <view class="list">
          <scroll-view scroll-y="true" class="scroll-list">
            <view v-for="(item, index) in addressList" :key="index" class="item flex flex-ai-c" @click="checkedAddress(index)">
              <!-- 单选勾 -->
              <view class="icon-radio">
                <i-icon :icon="radioAddress === index ? 'icongouxuan':'icontuoyuan'" :type="radioAddress === index?'m':'single'"></i-icon>
              </view>
              
              <!-- 地址信息 -->
              <view class="right-content">
                <!-- <view>
                  <text class="color-333 font-bold mr-20">四川森垚汽车销售服务有限公司</text>
                </view> -->
                <view>
                  <text>{{ item.name }}</text>
                  <text class="ml-20 mr-20">{{ item.mobile }}</text>
                  <u-tag v-if="item.is_default === '1'" text="默认地址" color="#333" bg-color="#FBD220" size="mini" mode="dark" shape="circle" />
                </view>
                <view>{{ item.addressAll }}</view>
              </view>
              
              <!-- 编辑图标 -->
              <view class="edit-icon" @click.stop.native="goAddressPage(item, 'edit')">
                <i-icon icon="iconqiyebianji" size="36rpx" color="#999"></i-icon>
              </view>
            </view>
            
            <view v-if="addressList.length === 0" class="not-address">
              <text>暂无收货地址</text>
            </view>
          </scroll-view>
        </view>
        
        <!-- 新增地址按钮 -->
        <view class="add-address">
          <i-button text="新增收货地址" shape="circle" color="#333" class="btn" @click.native="goAddressPage(item, 'add')"></i-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script src="./submitOrder.js"></script>

<style lang="scss" scoped>
@import './submitOrder.scss';
</style>